<template>
  <div class="article-manager">
    <pages-header
      ref="pageHeader"
      :title="$route.params.id ? '编辑保险' : '添加保险'"
      :backUrl="$routeProStr + '/insurance/list'"
    ></pages-header>
    <el-card :bordered="false" shadow="never" class="mt16">
      <el-form
        class="form"
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">保险信息</div>
        </div>
        <div>
          <el-form-item label="队员：" label-for="user_id" prop="user_id">
            <el-select
              class="content_width"
              v-model="formValidate.user_id"
              filterable
              remote
              reserve-keyword
              :remote-method="userRemoteMethod"
              :loading="userLoading"
              @focus="resetUserList"
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="保险类型：" label-for="type_id" prop="type_id">
            <el-cascader
              class="content_width"
              v-model="formValidate.type_id"
              size="small"
              :options="insuranceTypeList"
              :props="{ multiple: false, checkStrictly: true, emitPath: false }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="保险名称：" prop="name" label-for="name">
            <el-input v-model="formValidate.name" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="保险单号：" prop="code" label-for="code">
            <el-input v-model="formValidate.code" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="承保公司：" prop="company" label-for="company">
            <el-input v-model="formValidate.company" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="投保人：" prop="policyholder" label-for="policyholder">
            <el-input v-model="formValidate.policyholder" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="投保时间：" prop="insurance_time" label-for="insurance_time">
            <el-date-picker
              clearable
              v-model="formValidate.insurance_time"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="mr20"
            ></el-date-picker>
          </el-form-item>
        </div>
        <el-button type="primary" class="submission" v-db-click @click="onsubmit('formValidate')">提交</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { setInsurance, getInsuranceDetail, getInsuranceTypeAll, getUserList } from '@/api/insurance';

export default {
  name: 'addInsurance',
  components: {},
  data() {
    const validateUpload1 = (rule, value, callback) => {
      if (!this.formValidate.user_id) {
        callback(new Error('请选择用户'));
      } else {
        callback();
      }
    };
    const validateUpload2 = (rule, value, callback) => {
      if (!this.formValidate.type_id) {
        callback(new Error('请选择保险类型'));
      } else {
        callback();
      }
    };
    const validateUpload3 = (rule, value, callback) => {
      if (!this.formValidate.insurance_time) {
        callback(new Error('请选择投保时间'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      formValidate: {
        id: 0,
        user_id: '',
        type_id: 0,
        name: '',
        code: '',
        company: '',
        policyholder: '',
        insurance_time: '',
      },
      ruleValidate: {
        user_id: [{ required: true, validator: validateUpload1, trigger: 'change' }],
        type_id: [{ required: true, validator: validateUpload2, trigger: 'change' }],
        name: [{ required: true, message: '请输入保险名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入保险单号', trigger: 'blur' }],
        company: [{ required: true, message: '请输入保险公司', trigger: 'blur' }],
        policyholder: [{ required: true, message: '请输入投保人', trigger: 'blur' }],
        insurance_time: [{ required: true, validator: validateUpload3, trigger: 'change' }],
      },
      modalPic: false,
      insuranceTypeList: [],
      userList: [],
      userLoading: false,
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '100px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          user_id: '',
          type_id: 0,
          name: '',
          code: '',
          company: '',
          policyholder: '',
          insurance_time: '',
        };
      }
    },
  },
  methods: {
    resetUserList(e) {
      this.getUserList();
    },
    userRemoteMethod(query) {
      if (query !== '') {
        this.getUserList(query);
      }
    },
    getUserList(search = '') {
      let data = { search: search };

      getUserList(data)
        .then(async (res) => {
          this.userList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    getInsuranceTypeList() {
      getInsuranceTypeAll()
        .then(async (res) => {
          this.insuranceTypeList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 提交数据
    onsubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
            url: this.formValidate.id ? `insurance/insurance/${this.formValidate.id}` : 'insurance/insurance',
            method: this.formValidate.id ? 'put' : 'post',
            datas: this.formValidate,
          };

          setInsurance(data)
            .then(async (res) => {
              this.$message.success(res.msg);
              setTimeout(() => {
                this.$router.push({ path: this.$routeProStr + '/insurance/list' });
              }, 500);
            })
            .catch((res) => {
              this.$message.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    // 详情
    getDetails() {
      getInsuranceDetail(this.$route.params.id)
        .then(async (res) => {
          console.log(res);

          let data = res.data;
          this.formValidate = {
            id: data.id,
            user_id: data.user_id,
            type_id: data.type_id,
            name: data.name,
            code: data.code,
            company: data.company,
            policyholder: data.policyholder,
            insurance_time: data.insurance_time,
          };
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails();
    }
  },
  created() {
    this.getUserList();
    this.getInsuranceTypeList();
  },
};
</script>
<style scoped lang="scss">
.content_width {
  width: 414px;
}
::v-deep .ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid var(--prev-color-primary);
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: var(--prev-color-primary);
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
  font-size: 12px;
}
</style>
